<template>
  <BasicModal
    :visible="visible"
    title="依赖"
    width="800px"
    :min-height="340"
    :height="340"
    :show-ok-btn="true"
    :show-cancel-btn="true"
    :loading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div style="margin-top: 10px">
      <a-table
        :columns="columns"
        :data-source="tableData"
        size="small"
        :pagination="{ pageSize: 5 }"
        bordered
      />
    </div>
  </BasicModal>
</template>

<script>
  import { Table, message } from 'ant-design-vue'
  import { BasicModal } from '/@/components/Modal'
  import { getDependList } from '/@/api/module/module'

  export default {
    components: {
      'a-table': Table,
      BasicModal,
    },
    props: {
      moduleId: {
        type: Number,
        default: 0,
      },
      visible: {
        type: Boolean,
        default: false,
      },
    },
    emits: ['ok', 'cancel'],
    data: function () {
      return {
        tableData: [],
        loading: false,
        columns: [
          {
            title: 'Module Name',
            key: 'moduleName',
            dataIndex: 'moduleName',
            align: 'center',
          },
          {
            title: 'Depend Name',
            key: 'name',
            dataIndex: 'name',
            align: 'center',
          },
          {
            title: 'Description',
            key: 'desc',
            dataIndex: 'desc',
            align: 'center',
          },
          {
            title: 'Protocol',
            key: 'protocol',
            dataIndex: 'protocol',
            align: 'center',
          },
          {
            title: 'Target Type',
            key: 'targetType',
            dataIndex: 'targetType',
            align: 'center',
          },
          {
            title: 'Target ID',
            key: 'targetId',
            dataIndex: 'targetId',
            align: 'center',
          },
          {
            title: 'State',
            key: 'state',
            dataIndex: 'state',
            align: 'center',
          },
        ],
      }
    },
    mounted() {
      this.loading = true
      this.tryGetDependList()
    },
    methods: {
      handleCancel() {
        this.$emit('cancel')
      },
      handleOk() {
        this.$emit('ok')
      },
      tryGetDependList() {
        getDependList({ module: this.moduleId })
          .then((data) => {
            this.tableData = data
            this.loading = false
          })
          .catch(() => {
            message.error('get topo module list failed')
            this.loading = false
          })
      },
    },
  }
</script>
